<div class="g-doc">
    <div class="g-hd">
        <div class="m-head g-fluid">
            <div class="g-xs3" ng-bind-html="back"></div>
            <div class="g-xs6"><div class="tt">通讯费</div></div>
            <div class="g-xs3 f-tar" ng-bind-html="next"></div>
        </div>
    </div>
    <div class="g-ct">
            <form name="js_form" type="post" class="m-form" novalidate ng-submit="form()">
                <div ng-hide="step">
                    <div class="formitm f-cb">
                        <div class="mn" style="float:left">
                            <div class="mnc" style="margin-right:12rem;">
                                <input type="text" name="mobile" class="input" ng-model="mobile" ng-change="checkLocation()" placeholder="通讯号码" required ng-maxlength="11" ng-pattern="/^1[3|5|7|8](\d{9})?/"/>
                            </div>
                        </div>
                        <div class="opt" style="width:5rem;margin-left:-5rem;">
                            <i class="icon-font u-mobile" title="通讯号码">&#xe627;</i>
                        </div>
                        <div class="error" ng-show="js_form.mobile.$dirty && js_form.mobile.$invalid">
                            <small class="error" ng-show="js_form.mobile.$error.required">
                                通讯号码为必填项.
                            </small>
                            <small class="error" ng-show="js_form.mobile.$error.maxlength">
                                通讯号码长度不能超过11个字符.
                            </small>
                            <small class="error" ng-show="js_form.mobile.$error.pattern">
                                通讯号码不正确.
                            </small>
                        </div>
                    </div>
                </div>
                <div ng-show="step">
                        <div class="formitm f-cb">
                            <label class="lab">通讯号码:</label>
                            <div class="mn" style="float:left">
                                <div class="mnc" style="margin-right:12rem;margin-left:9rem;">
                                    {{mobile}}
                                </div>
                            </div>
                            <div class="opt" style="width:5rem;margin-left:-5rem;">
                                {{mobileType}}
                            </div>
                        </div>
                        <div class="formitm f-cb">
                            <label class="lab">充值金额 </label>
                            <div class="mn">
                                <div class="mnc" style="margin-left:9rem;">
                                    <!--<input type="text" class="input" />-->
                                    <span ng-class="{'z-sel': charge==10}" ng-click="charge=10" class="charge">￥<strong>10</strong></span>
                                    <span ng-class="{'z-sel': charge==20}" ng-click="charge=20" class="charge">￥<strong>20</strong></span>
                                    <span ng-class="{'z-sel': charge==50}" ng-click="charge=50" class="charge">￥<strong>50</strong></span>
                                    <span ng-class="{'z-sel': charge==100}" ng-click="charge=100" class="charge">￥<strong>100</strong></span>
                                    <span ng-class="{'z-sel': charge==200}" ng-click="charge=200" class="charge">￥<strong>200</strong></span>

                                </div>
                            </div>
                            <div style="margin-left:9rem;" class="mnc">
                                <span class="u-agree"><i class="icon-font" title="同意">&#xe628;</i> 同意《缴费服务条例》</span>
                            </div>
                        </div>
                    </div>
                   <div class="formitm">
                    <div class="btn">
                        <a href="javascript:;" class="button" ng-hide="step" ng-click="step= (js_form.mobile.$invalid ? 0 : 1)">下一步</a>
                        <button type="submit" ng-show="step" ng-disabled="js_form.mobile.$dirty && js_form.mobile.$invalid"><span>立即充值</span></button></div>
                </div>
            </form>
    </div>
</div>
